<template>
  <div id="detail-list">
    <a-spin :spinning="loading">
      <a-icon spin slot="indicator" type="loading" style="font-size: 40px"/>
      <a-table
        size="middle"
        :columns="columns"
        :data-source="dataSource"
        :pagination="false"
        :showHeader="showHeader"
        :rowKey="record => record.id"
        :locale="{ emptyText: '暂无歌曲信息' }"
      >
        <!-- 序号 -->
        <span slot="key" slot-scope="text, record, index">
          <i
            style="color: #ff4d4f;"
            class="iconfont icon-yinliang"
            v-if="record.id === currentId"
          ></i>
          <span v-else>{{ index + 1 }}</span>
        </span>
        <!-- 小红心 -->
        <a slot="operation" slot-scope="text, record">
          <a-icon type="heart" style="color: #606266;" />
        </a>
        <!-- 音乐标题 -->
        <div
          class="music-name"
          slot="name"
          slot-scope="text, record"
          @dblclick="playSongs(record)"
        >
          <span
            class="name text-hidden pointer"
            :class="{ 'colorText': record.id === currentId }"
            :title="`${record.name}${record.alia && record.alia.length ? `（${record.alia[0]}）` : ''}`"
          >
            {{ `${record.name}${record.alia && record.alia.length ? `（${record.alia[0]}）` : ''}` }}
          </span>
          <!-- 无音源 -->
          <div class="tag mleft-5" v-if="record.privilege && record.privilege.chargeInfoList && record.privilege.chargeInfoList[0].chargeType === 3">
            无音源
          </div>
          <div style="display: flex; align-item: center;" v-else>
            <div class="tag mleft-5" v-if="record.sq">SQ</div>
            <div
              class="tag tag-mv mleft-5"
              v-if="record.mv || record.mvid"
              @click="gomvDetail(event ,record.mv || record.mvid)"
            >
              MV<a-icon type="caret-right" />
            </div>
            <div
              class="tag tag-vip mleft-5"
              v-if="record.fee === 1">
              <i class="iconfont icon-VIP" style="font-size: 22px;"></i>
            </div>
            <div class="tag mleft-5" v-if="record.fee === 1">试听</div>
          </div>
        </div>
        <!-- 歌手 -->
        <div
          class="singer text-hidden"
          slot="ar"
          slot-scope="text, record" 
          @click="goSinger"
        >
          <span
            class="pointer"
            :class="{ 'colorText': record.id === currentId }"
            v-for="ar in getAr(record)"
            :key="ar.id"
            :data-id="ar.id"
          >{{ ar.name }}</span>
        </div>
        <!-- 专辑名 -->
        <div
          class="album text-hidden"
          slot="al"
          slot-scope="text, record"
          :class="{ 'colorText': record.id === currentId }"
          @click="goAlbumDetail(record.al ? record.al.id : record.album.id)"
        >
          {{ record.al ? record.al.name : record.album.name }}
        </div>
        <!-- 时长 -->
        <div
          class="duration"
          slot="duration"
          slot-scope="text, record"
          :class="{ 'colorText': record.id === currentId }"
        >
          {{ record.dt ? pchangeSeconds(record.dt) : pchangeSeconds(record.duration) }}
        </div>
      </a-table>
      <!-- loading插槽 -->
      <slot name="more"></slot>
    </a-spin>
  </div>

</template>

<script>
import { mapState } from 'vuex';
import mixin from '@/mixins/mixin';
import { Table, Spin } from 'ant-design-vue';
import { changeSeconds } from '@/utils/figure';

export default {
  name: 'List',

  mixins: [mixin],

  components: {
    ASpin: Spin,
    ATable: Table
  },

  props: {
    dataSource: {
      type: Array,
      default() {
        return [];
      }
    },
    columns: {
      type: Array,
      default() {
        return [];
      }
    },
    // 是否显示表头
    showHeader: {
      type: Boolean,
      default: true
    }
  },

  data() {
    return {
      loading: false,
      // 当前播放音乐id
      currentId: -1
    };
  },
  
  computed: {
    ...mapState({
      // historyList: state => state.detail.historyList
      // loading: state => state.main.loading,
      audioId: state => state.detail.audioId
    })
  },

  watch: {
    // 监听当前播放歌曲渲染
    audioId: {
      handler(value) {
        this.currentId = value.id;
        this.$forceUpdate();
      }
    }
  },

  methods: {
    // 处理时长
    pchangeSeconds(dt) {
      return changeSeconds(dt);
    },
    getAr(record) {
      if (record.ar) {
        return record.ar
      }
      return record.artists;
    },
    // 点击播放音乐
    playSongs(record) {
      // 双击禁止选中文字
      window.getSelection ?window.getSelection().removeAllRanges() : document.selection.empty();
      
      this.$forceUpdate();
      // 当前需要播放的音乐信息
      this.$store.commit('main/ISPLAYED', true);
      this.$store.commit('detail/AUDIOID', record);
      this.$store.commit('detail/ADDAUDIOLIST', record);
    },
    goAlbumDetail(id) {
      console.log(id)
      this.$router.push({
        name: 'albumdetail',
        query: { id }
      })
    },
    goSinger(event) {
      console.log(event)
      const { id } = event.target.dataset;
      if (id) {
        this.$router.push({
          name: 'artistdetail',
          query: { id }
        })
      }
    }
  }
};
</script>

<style lang="less" scoped>
#detail-list {
  position: relative;
  // /deep/.ant-table table {
  //   border-bottom: 1px solid #EBEEF5;
  // }
  /deep/.ant-table-thead > tr > th {
    color: #909399;
    font-weight: 700;
    font-size: 12px;
    // text-align: center;
    background: #fff;
    border-bottom: none;
  }
  /deep/.ant-table-placeholder {
    border-top: none;
    display: none;
  }
  /deep/.ant-table-tbody > tr {
    &:nth-child(2n) {
      background: #fafafa;
    }
  }
  /deep/td.ant-table-row-cell-ellipsis,
  /deep/td.ant-table-row-cell-break-word {
    cursor: pointer;
    border-color: transparent;
  }
  /deep/.ant-table-middle > .ant-table-content > .ant-table-body > table > .ant-table-tbody > tr > td {
    font-size: 12px !important;
  }
  .loading, .no-loading {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .music-name {
    display: flex;
    align-items: center;
    // .name {
    //   display: inline-block;
    //   width: 60%;
    // }
  }
  .singer>span::after {
    content: '/';
    display: inline-block;
  }
  .singer>span:last-child::after {
    display: none;
  }
  .tag {
    display: inline-block;
    border: 1px solid #ec4141;
    padding: 0 2px;
    font-size: 12px;
    height: 15px;
    line-height: 15px;
    color: #ec4141;
    border-radius: 2px;
  }
  .tag-mv {
    border-color: #ec4141;
    color: #ec4141;
  }
  .tag-vip {
    border-color: #fe672e;
    color: #fe672e;
  }
  .colorText {
    color: #ff4d4f;
  }
}
</style>